<template>
<div class="flex flex-col min-h-screen">
  <Navbar />
  <div class="w-full relative mb-5">
    <Carousel :images="carouselImages" :interval="5000">
      <template v-slot:default="{ image }">
        <div class="carousel-item w-full h-full bg-cover bg-center" :style="{ backgroundImage: `url(${getImageUrl(image.src)})` }"></div>
      </template>
    </Carousel>
    <img class="invisible w-full object-cover" src="/src/assets/img/news_bg.png" alt="">
  </div>
  <div class="flex-1 mb-10">
    <div class="hidden lg:flex items-center mt-[30px] max-w-[1200px] mx-auto" @click="onLink">
      <img class="w-[235px] h-[100px]" src="/src/assets/img/about_img.png" alt="">
      <div class="text-[#B660BE] pl-[45px] pr-[26px] h-[72px] border-solid border-r-[#DDE3EB] border-r-2 flex align-center flex-col justify-center text-2xl">
        <p>2024</p>
        <p class="text-base mt-2">03-13</p>
      </div>
      <div class="pl-[25px]">
        <p class="text-[#B660BE] text-base">“玖芾国际教育咨询有限公司”提供赴日留学</p>
        <p class="text-sm/7 mt-2"> 北京玖芾国际教育咨询有限公司专业提供赴日留学、提升学历、就业等服务。公司在中日两国均设有合作公司，共同为希望赴日的同学提供专业...</p>
      </div>
    </div>
    <div class="lg:hidden ml-2 pt-2 pl-4 pr-2 pb-4 border-solid border-l-[1px] border-l-[#ccc]" @click="onLink">
      <p class="text-[#666] text-sm/[20px] relative">
        <span class="absolute top-[6px] -left-[19px] w-[5px] h-[5px] bg-[#B660BE] rounded"></span>
        2024 03-13
      </p>
      <div class="mt-2">
        <p class="text-[#B660BE] text-base">“玖芾国际教育咨询有限公司”提供赴日留学</p>
        <p class="text-sm/7 pt-1 pb-2"> 北京玖芾国际教育咨询有限公司专业提供赴日留学、提升学历、就业等服务。公司在中日两国均设有合作公司，共同为希望赴日的同学提供专业...</p>
      </div>
      <img class="w-[235px] h-[100px]" src="/src/assets/img/about_img.png" alt="">
    </div>
  </div>
  <Footer />
</div>
</template>
<script setup>
import Footer from '@/components/Footer.vue';
import Navbar from '@/components/Navbar.vue'
import Carousel from '@/components/Carousel.vue';
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
let router = useRouter()
let carouselImages = reactive([
  { src: 'news_bg.png', link: '#' },
])
let onLink = () => {
  router.push('/news/detail?id=1')
} 
const getImageUrl = image => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`/src/assets/img/${image}`, import.meta.url).href
}
</script>

